<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <h:head>
        <title>MeteoCal - #{uBean.newUser.username}'s calendar</title>
        <link href="../css/application.css" rel="stylesheet"></link>
        <link href="../css/fullcalendar.css" rel="stylesheet"></link>
        <link href="../css/overridingcalendar.css" rel="stylesheet"></link>
        <script src="../css/moment.min.js"></script>
        <script src="../css/fullcalendar.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#extcal').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    editable: false,
                    defaultView: 'month',
                    events: #{cb.getOUEvents(uBean.newUser.username)}
                });

            });
        </script>
        <link rel="icon" type="image/ico" href="../images/logoico.ico"/>
        <f:metadata>
            <f:viewParam name="user" value="#{uBean.newUser.username}" />
        </f:metadata>
    </h:head>
    <h:body><div id="body">

            <div id="head">
                <a href="personalpage.xhtml"><img src="../images/logo.png" /></a>

                <h:form><p:commandLink action="#{loginBean.logout()}">
                        <p:graphicImage value="../images/logout.png" style="width: 70px; top:140px; left:88%;"/>
                    </p:commandLink></h:form>
            </div>

            <div id="title">
                <p1>MeteoCal</p1><br />
                <p2>Your website to plan your events.</p2>
            </div>

            <div id="bar">
                <a href="personalpage.xhtml" id="ppage" >#{uBean.actualLoggedUser.username} 's MeteoCal</a>
                <a href="calendar.xhtml" id="calendar">Calendar</a>
                <a href="search.xhtml" id="search">Search MeteoCal's friends</a>
            </div>

            <div id="registration"><center>
                    <h:form>
                        <br /> <br />

                        <h:graphicImage value="../images/denied.png" style="position:absolute; width: 110px; top:60px; left: 1%;"  
                                        rendered="#{uBean.privCal(uBean.newUser.username)}"/>
                        <h:outputText value="Sorry, #{uBean.newUser.username} has a private calendar, you cannot see it" 
                                      style="position:absolute; top: 100px; font-size: 25px; width: 300px; left: 30%;"  rendered="#{uBean.privCal(uBean.newUser.username)}"/>

                    </h:form>

                </center>
            </div>
            <h:form rendered="#{uBean.pubCal(uBean.newUser.username)}"><center><br />
                    <b style="font-weight: bold; text-shadow: 0px 2px 5px #000000; font-size: 160%; 
                       color:red; position: absolute; top: 230px; left: 30%; right:30%;">#{uBean.newUser.username}'s calendar</b><br />
                    <br /><div id="extcal"></div></center></h:form>

        </div>      
    </h:body>
</html>
